<template>
  <div class="app-container">
    <div class="shop-container">
      <h3>商品信息</h3>
      <div v-loading="detailLoading" class="minh-200">
        <goodsItem v-for="(detail, index) in shoplist.filter(item => item.gift != 1)" :key="index" :detail="detail" :ruleForm="ruleForm" mode="view"></goodsItem>
        <div v-if="shoplist.some(item => item.gift == 1)">
          <h3>赠送商品信息</h3>
          <goodsItem v-for="(detail, index) in shoplist.filter(item => item.gift == 1)" :key="index" :detail="detail" :ruleForm="ruleForm" mode="view"></goodsItem>
        </div>
      </div>
    </div>
    <el-form :model="ruleForm" ref="ruleForm" label-width="120px">
      <div class="payment-container">
        <h3>支付</h3>
        <el-form-item label="在线支付">
          <span class="pl-20">{{ ruleForm.sumPrice }}元</span>
        </el-form-item>
      </div>
      <div class="channel-container">
        <h3>渠道</h3>
        <el-form-item label="渠道类别">
          <span class="pl-20">{{ ruleForm.channelTypeName }}</span>
        </el-form-item>
        <el-form-item label="渠道">
          <span class="pl-20">{{ ruleForm.channelName }}</span>
        </el-form-item>
      </div>
      <div class="detail-container">
        <h3>订单信息</h3>
        <el-form-item label="后台单号">
          <el-col class="pl-20">{{ruleForm.xmbzNo}}</el-col>
        </el-form-item>
        <el-form-item label="平台单号">
          <el-col class="pl-20">{{ruleForm.platformOrderId}}</el-col>
          <!-- <el-input v-model="ruleForm.platformOrderId" clearable size="medium"></el-input> -->
        </el-form-item>
        <el-form-item label="收货人">
          <el-col class="pl-20">{{ruleForm.receiverName}}</el-col>
        </el-form-item>
        <el-form-item label="收货电话">
          <el-col class="pl-20">{{ruleForm.receiverPhone}}</el-col>
        </el-form-item>
        <el-form-item label="下单电话">
          <el-col class="pl-20">{{ruleForm.bookerPhone}}</el-col>
        </el-form-item>
        <el-form-item label="客户备注">
          <el-col class="pl-20 c-red fw-bold">{{ruleForm.customerNotes}}</el-col>
        </el-form-item>
        <el-form-item label="生产备注">
          <el-col class="pl-20">{{ruleForm.productionNotes}}</el-col>
        </el-form-item>
        <el-form-item label="配送备注">
          <el-col class="pl-20">{{ruleForm.deliveryNotes}}</el-col>
        </el-form-item>
        <el-form-item label="客服备注">
          <div slot="label" class="">
            <div class="lh-20">客服备注</div>
            <div class="lh-20 c-red fw-bold">（仅客服使用）</div>
          </div>
          <el-col class="pl-20">{{ruleForm.customerServiceNotes}}</el-col>
        </el-form-item>
        <el-form-item label="平台门店" prop="merchantName">
          <span>
            {{ ruleForm.merchantName }}
          </span>
        </el-form-item>
        <el-form-item label="门店信息">
          <span class="pl-20">
            {{ ruleForm.storeInfo }}
          </span>
        </el-form-item>
        <el-form-item v-if="ruleForm.groupBuyQRCode ? true : false" label="团购二维码">
          <!-- <img :src="ruleForm.groupBuyQRCode" alt="" @click="imgclick"> -->
          <img :src="ruleForm.groupBuyQRCode" alt="" style="width: 450px;height: 450px">
          <!-- <span>
            {{ ruleForm.groupBuyQRCode }}
          </span> -->
        </el-form-item>
      </div>
      <div class="detail-container" v-if="ruleForm.addedServiceVO && ruleForm.addedServiceVO.length">
        <h3>增值服务信息</h3>
        <div class="ml-200 d-f">
          <el-card v-for="(item, i) in ruleForm.addedServiceVO" :key="i" class="w-300 mr-20 mb-20">
            <div slot="header" class="clearfix">
              <span>{{ item.typeName }}</span>
            </div>
            <div class="lh-32">
              <span>是否满足服务：</span>
              <el-tag :type="item.pass == '1' ? 'success' : 'danger'">{{ item.pass == '1' ? '满足' : '不满足' }}</el-tag>
            </div>
            <div class="lh-32">
              <span>反馈原因/备注信息：</span>
              <span>{{ item.passValue }}</span>
            </div>
          </el-card>
        </div>
      </div>
      <div class="detail-container" v-if="consultHappyOrderList && consultHappyOrderList.length">
        <h3>咨询快乐工单结果</h3>
        <div class="ml-200 d-f">
          <el-card v-for="(item, i) in consultHappyOrderList" :key="i" class="w-300 mr-20 mb-20 d-ib">
            <el-tag v-if="consultHappyDisposeType[item.disposeState]" :type="consultHappyDisposeType[item.disposeState].type">{{ consultHappyDisposeType[item.disposeState].label }}</el-tag>
            <div class="lh-40">咨询内容：{{ item.content }}</div>
            <div class="lh-40">咨询结果：{{ item.resultContent }}</div>
          </el-card>
        </div>
      </div>
      <div class="address-container">
        <h3>配送地址和时间</h3>
        <el-form-item label="配送时间">
          <!-- <el-col class="pl-20">客户备注时间：{{ this.PendingStartTime }}~{{ this.PendingEndTime }}</el-col> -->
          <el-col class="pl-20">{{ deliveryTimeNotes }}</el-col>
          <el-col class="pl-20">{{ ruleForm.StartTime }}~{{ ruleForm.EndTime }}</el-col>
        </el-form-item>
        <el-form-item label="仓库">
          <el-col class="pl-20">{{ ruleForm.deptName }} &nbsp;&nbsp; {{ ruleForm.mainWarehouse }} &nbsp;&nbsp; {{ ruleForm.branchWarehouse }}</el-col>
        </el-form-item>
        <el-form-item label="地址">
          <el-col class="pl-20">{{ ruleForm.receiverAddress }}</el-col>
        </el-form-item>
        <orderLocationMap :orderData="ruleForm" ref="orderLocationMap" style="width: 90%;height: 800px;"></orderLocationMap>
      </div>
    </el-form>
    <!-- 图片弹框 -->
    <el-dialog
      title
      :visible.sync="imgFlag"
      center
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
      z-index="2007"
    >
      <div style="width: 100%;">
        <el-scrollbar class="page-component__scroll">
          <el-col>
            <img :src="ruleForm.groupBuyQRCode" alt="">
          </el-col>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  orderList, // 查询
  detailList,// 订单详情
} from '@/api/pending';
import { getUrlKey } from '@/util/getUrlKey.js';
import deliveryTime from '@/components/foundorder/deliverytime';
import orderLocationMap from './components/orderLocationMap'
import goodsItem from './components/goodsItem'
import {workAskTransportList} from "@/api/workorder/consultHappy";
import { consultHappyDisposeType } from '@/const'

export default {
  components: {
    deliveryTime,
    orderLocationMap,
    goodsItem,
  },
  data() {
    return {
      consultHappyDisposeType,
      // xmbzNo:'',
      querydetail: {
        orderId: ''
      },
      shoplist: [],
      cityselect: "", // 城市获取列表
      getWarehousesByDeptIds: { // 查询所有仓库信息，划区域
        cityId: '',
        deptId: '',
        name: ''
      },
      formInline: {
        // deptId: getUrlKey('cityId'),// 城市id
        // xmbzNo: '',// 后台单号
        id: '',
        StartTime: '',
        EndTime: '',
        channelType: '',
        orderTimeSort: 0, // 下单时间排序
        deliveryTimeSort: 0, // 配送时间排序
        page: 1,
        limit: 10,
        size: 10,
        orderDetailRequests: []
      },
      PendingStartTime: '',
      PendingEndTime: '',
      ruleForm: {
        totalPrice: '',
        channel: '',
        receiverDetailAddress: '',
        channelType: '',
        // wareHouse: '', // 用来获取分仓的参数
        branchWarehouse: '', // 分仓
        orderDetailRequests: []
      },
      detailLoading: true,
      deliveryTimeNotes: '',
      imgFlag: false,
      consultHappyOrderList: [], // 咨询快乐工单
    }
  },
  created() {
    this.getList().then(() => {
      if (this.ruleForm.transportDisposeContent) {
        workAskTransportList({
          xmbzNo: this.ruleForm.xmbzNo
        }).then(res => {
          this.consultHappyOrderList = (res.data.data && res.data.data.rows) || []
        })
      }
    });
  },
  mounted() {
    this.cityId = JSON.parse(window.localStorage.getItem("saber-areaId")).content
  },
  methods: {
    getList() {
      this.detailLoading = true;
      this.querydetail.orderId = getUrlKey('id');
      this.formInline.id = getUrlKey('id');
      detailList(this.querydetail).then(res => {
        this.shoplist = res.data.data || []
        setTimeout(() => {
          this.detailLoading = false;
        }, 0.5 * 1000);
      })
      return orderList(this.formInline).then(res => {
        // this.getOrderChannelTypeList();
        // 渠道类别列表
        res.data.data.rows[0].sumPrice = (res.data.data.rows[0].totalPrice/100).toFixed(2);
        let result = res.data.data.rows[0];
        this.ruleForm = res.data.data.rows[0];
        this.deliveryStart = res.data.data.rows[0].deliveryStartTime.slice(5,16);
        this.PendingEndTime = res.data.data.rows[0].deliveryEndTime.slice(11,16);
        this.PendingStartTime = res.data.data.rows[0].deliveryStartTime.slice(5,16);
        this.ruleForm.StartTime = this.ruleForm.deliveryStartTime.slice(5,16);
        this.ruleForm.EndTime = this.ruleForm.deliveryEndTime.slice(11,16);
        // // 未确认订单若有时间，则加在配送备注中
        if(this.ruleForm.status == 1 && res.data.data.rows[0].deliveryStartTime.slice(5,16) !== '') {
          this.deliveryTimeNotes = result.deliveryNotes.substring(0,result.deliveryNotes.lastIndexOf("##"));
          this.deliveryMarksStart = this.deliveryTimeNotes.slice(5,16);
          this.deliveryMarksEnd = this.deliveryTimeNotes.slice(21,27);
          this.deliveryTimeEndNotes = this.ruleForm.deliveryNotes.substring(this.ruleForm.deliveryNotes.lastIndexOf("##"));
          this.deliveryTimeNotes = `客户原备注时间：${ this.deliveryMarksStart }~${ this.deliveryMarksEnd }`
          this.ruleForm.deliveryNotes =  this.deliveryTimeNotes + this.deliveryTimeEndNotes;
        } else if(this.ruleForm.status !== 1 && res.data.data.rows[0].deliveryStartTime.slice(5,16) !== '') {
          this.deliveryTimeNotes = result.deliveryNotes.substring(0,result.deliveryNotes.lastIndexOf("##"));
          this.deliveryTimeEndNotes = result.deliveryNotes.substring(result.deliveryNotes.lastIndexOf("##"));
          this.ruleForm.deliveryNotes = this.deliveryTimeNotes + this.deliveryTimeEndNotes;
        }
        this.$refs.orderLocationMap.initMapData(this.ruleForm)
      })
    },
    imgclick() {
      this.imgFlag = true;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/orderdetail.scss";
</style>
